<template>
  <!-- 巡检管理-巡检任务 -->
  <div class="inspection-task">
    <a-card class="card card1" title="查询">
      <div class="input-box">
        <div class="item">
          <div class="text">任务名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.taskName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">创建者</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.createBy"
          >
          </a-input>
        </div>
        <!-- 资源类型暂时不要 -->
        <!-- <div class="item">
          <div class="text">资源类型</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.resourceTypeId"
          >
            <a-select-option
              v-for="item in iResourceTypeList"
              :key="item.typeId"
              :value="item.typeId"
              >{{ item.typeName }}</a-select-option
            >
          </a-select>
        </div> -->
        <div class="item">
          <div class="text">任务类型</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.taskTypeId"
          >
            <a-select-option
              v-for="item in inspectionTaskTypeList"
              :key="item.typeId"
              :value="item.typeId"
              >{{ item.typeName }}</a-select-option
            >
          </a-select>
        </div>
        <div class="item">
          <div class="text">调度类型</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.scheduleTypeId"
          >
            <a-select-option
              v-for="item in schedulingTypeList"
              :key="item.typeId"
              :value="item.typeId"
              >{{ item.typeName }}</a-select-option
            >
          </a-select>
        </div>
        <div class="item">
          <div class="text">最后一次执行状态</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="formData.lastInstanceStatus"
          >
            <a-select-option :value="0">执行中</a-select-option>
            <a-select-option :value="1">已完成</a-select-option>
            <a-select-option :value="2">人工停止</a-select-option>
            <a-select-option :value="3">异常停止</a-select-option>
          </a-select>
        </div>
        <div class="item create-time">
          <div class="text">创建时间</div>
          <a-range-picker
            class="input"
            show-time
            v-model:value="formData.createTime"
            @change="changeCreateTime"
          />
        </div>
        <div class="item last-time">
          <div class="text">最后一次运行时间</div>
          <a-range-picker
            class="input"
            show-time
            v-model:value="formData.lastRunTime"
            @change="changelastRunTime"
          />
        </div>
        <div class="item button-box">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="card card2" title="列表">
      <template #extra>
        <div class="button-box">
          <a-button
            class="button"
            type="primary"
            @click="clickAddInspectionTask"
            >增加</a-button
          >
          <a-popconfirm
            title="确认删除？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="clickDelInspectionTask('批量删除', '')"
          >
            <a-button class="button">批量删除</a-button>
          </a-popconfirm>
        </div>
      </template>
      <a-table
        class="table"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :row-selection="{
          selectedRowKeys: tableSelectedRowKeys,
          onChange: onSelectChange,
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'scheduleStatus'">
            <div class="scheduleStatus">
              <a-switch
                :checked="record.scheduleStatus === 1"
                @change="changeSwitch(record)"
              />
            </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="operation">
              <span @click="clickEditInspectionTask(record)">编辑</span>
              <a-popconfirm
                title="确认删除？"
                ok-text="确认"
                cancel-text="取消"
                @confirm="clickDelInspectionTask('删除', record)"
              >
                <span>删除</span>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
      <a-pagination
        v-model:current="formData.pageNum"
        v-model:pageSize="formData.pageSize"
        :total="formData.total"
        :show-total="total => `共 ${total} 条数据`"
        :show-size-changer="true"
        @change="changePagination"
      />
    </a-card>
    <AddInspectionTask
      :info="infoAddInspectionTask"
      @cancel="cancelAddInspectionTask"
      @updatePage="updatePage"
    ></AddInspectionTask>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  import AddInspectionTask from './modal/AddInspectionTask.vue'
  // 引入方法
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import api from '@/axios/api.js'
  import { message } from 'ant-design-vue'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const iResourceTypeList = ref([]) //获取资源类型列表
  const inspectionTaskTypeList = ref([]) //巡检任务类型列表
  const schedulingTypeList = ref([]) //获取调度类型
  const formData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0,
    taskName: undefined, //任务名称
    resourceTypeId: undefined, //资源类型
    taskTypeId: undefined, //任务类型
    scheduleTypeId: undefined, //调度类型
    lastInstanceStatus: undefined, //最后一次执行状态: 0: 执行中,1: 已完成 ,2: 人工停止,3：异常停止,all:全部类型
    createStartTime: undefined, //	创建时间筛选：开始时间
    createEndTime: undefined, //创建时间筛选：结束时间
    lastRunStartTime: undefined, //	最后一次运行时间：开始时间
    lastRunEndTime: undefined, //最后一次运行时间：结束时间
    createBy: undefined, //创建人
    createTime: undefined,
    lastRunTime: undefined,
  }) //巡检任务列表表单
  const infoAddInspectionTask = ref({
    open: false,
    title: '',
    record: undefined,
  }) //新增/修改巡检任务对话框info
  const tableSelectedRowKeys = ref([]) //表格选中的值
  const columns = [
    { title: '任务名称', dataIndex: 'inspectionName' },
    { title: '资源名称', dataIndex: 'resourceTypeName' },
    { title: '调度状态', dataIndex: 'scheduleStatusStr' },
    { title: '任务类型', dataIndex: 'taskTypeName' },
    { title: '创建人', dataIndex: 'createBy' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '最后一次运行时间', dataIndex: 'lastScheduleTime' },
    { title: '启动或停止', dataIndex: 'scheduleStatus' },
    { title: '操作', dataIndex: 'operation' },
  ] //列表配置
  const tableData = ref([]) //列表数据
  onMounted(() => {
    getIResourceTypeList()
    getInspectionTaskTypeList()
    getSchedulingTypeList()
    getInspectionTaskList(formData.value)
  })
  // 自定义方法
  //获取巡检任务列表
  const getInspectionTaskList = async data => {
    const res = await api.getInspectionTaskList(data)
    console.log('获取巡检任务列表', tableData.value)
    tableData.value = res.data.data.records.map(item => {
      return { ...item, key: item.id }
    })
    formData.value.total = res.data.data.total
  }
  //获取资源类型列表
  const getIResourceTypeList = async () => {
    const res = await api.getIResourceTypeList()
    iResourceTypeList.value = res.data.data
  }
  //获取巡检任务类型列表
  const getInspectionTaskTypeList = async () => {
    const res = await api.getInspectionTaskTypeList()
    inspectionTaskTypeList.value = res.data.data
  }
  //获取调度类型列表
  const getSchedulingTypeList = async () => {
    const res = await api.getSchedulingTypeList()
    schedulingTypeList.value = res.data.data
  }
  //删除巡检任务
  const delInspectionTask = async data => {
    const res = await api.delInspectionTask(data)
    if (res.data.code === 200) {
      message.success('删除成功')
      updatePage()
    } else {
      message.error('删除失败')
    }
  }
  //启动或停止巡检任务
  const startOrStopInspectionTask = async data => {
    const res = await api.startOrStopInspectionTask(data)
    console.log('启动或停止巡检任务', res)
    if (res.data.code === 200) {
      message.success('操作成功')
      getInspectionTaskList(formData.value)
    } else {
      message.error('操作失败')
    }
  }
  //更新页面数据
  const updatePage = () => {
    getInspectionTaskList(formData.value)
  }
  //点击添加巡检任务
  const clickAddInspectionTask = () => {
    infoAddInspectionTask.value = {
      open: true,
      title: '新增巡检任务',
      record: undefined,
    }
  }
  //点击编辑巡检任务
  const clickEditInspectionTask = record => {
    infoAddInspectionTask.value = {
      open: true,
      title: '编辑巡检任务',
      record,
    }
  }
  //点击关闭新增巡检任务对话框
  const cancelAddInspectionTask = () => {
    infoAddInspectionTask.value = {
      open: false,
      title: '',
      record: undefined,
    }
  }
  //点击删除巡检任务
  const clickDelInspectionTask = (value, record) => {
    if (value === '删除') {
      delInspectionTask([record.id])
    } else if (value === '批量删除') {
      delInspectionTask(tableSelectedRowKeys.value)
    }
  }
  //创建时间改变
  const changeCreateTime = (dates, dateStrings) => {
    formData.value.createStartTime = dateStrings[0]
    formData.value.createEndTime = dateStrings[1]
  }
  //最后一次运行时间改变
  const changelastRunTime = (dates, dateStrings) => {
    formData.value.lastRunStartTime = dateStrings[0]
    formData.value.lastRunEndTime = dateStrings[1]
  }
  //点击重置
  const clickReset = () => {
    formData.value = {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      taskName: undefined, //任务名称
      resourceTypeId: undefined, //资源类型
      taskTypeId: undefined, //任务类型
      scheduleTypeId: undefined, //调度类型
      lastInstanceStatus: undefined, //最后一次执行状态: 0: 执行中,1: 已完成 ,2: 人工停止,3：异常停止,all:全部类型
      createStartTime: undefined, //	创建时间筛选：开始时间
      createEndTime: undefined, //创建时间筛选：结束时间
      lastRunStartTime: undefined, //	最后一次运行时间：开始时间
      lastRunEndTime: undefined, //最后一次运行时间：结束时间
      createBy: undefined, //创建人
      createTime: undefined,
      lastRunTime: undefined,
    }
    getInspectionTaskList(formData.value)
  }
  //点击查询
  const clickQuery = () => {
    getInspectionTaskList(formData.value)
  }
  //分页改变
  const changePagination = () => {
    getInspectionTaskList(formData.value)
  }
  //表格选中改变
  const onSelectChange = selectedRowKeys => {
    tableSelectedRowKeys.value = selectedRowKeys
  }
  //开关改变
  const changeSwitch = record => {
    startOrStopInspectionTask({ id: record.id })
  }
</script>
<style lang="less" scoped>
  .inspection-task {
    .card1 {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;
        gap: (20 / @vw);
        @px: (15 / @vw);
        @pxTwo: (10 / @vw);
        .item {
          width: calc(25% - @px);
          display: flex;
          align-items: center;
          .text {
            margin-right: (10 / @vw);
            width: (130 / @vw);
            text-align: right;
          }
          .input {
            flex: 1;
          }
          .button {
            margin-right: (10 / @vw);
          }
        }
        .create-time {
          flex: 1;
        }
        .last-time {
          flex: 1;
          // width: calc(50% - @pxTwo);
        }
        .button-box {
          width: 100%;
        }
      }
    }
    .card2 {
      .button-box {
        .button {
          margin-right: (10 / @vw);
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .table {
        margin-bottom: (20 / @vh);
        .operation {
          span {
            margin-right: (10 / @vw);
            color: @tc;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
